<template>
  <div>
    <a-button type="primary" @click="showmod">+ {{ $t('user.verification-code.required111566110577288') }}
      Action</a-button>
    <a-modal v-model="visible" title="新建Action" @ok="handleOk">
      <!-- 一行 -->
      <div style="margin: 10px;">
        <span>合规要求编号</span>
        <span>
          <a-input placeholder="“Action  0066”" style="width: 200px; margin-left: 39px;" size="small" />
        </span>
      </div>
      <!-- 二行 -->
      <div style="margin: 10px;">
        <span>{{ $t('user.verification-code.required111566172') }}</span>
        <span>
          <a-input :placeholder="$t('user.verification-code.required111566172')" style="width: 200px; margin-left: 27px;"
            size="small" />
        </span>
        <span>
          <a-button type="primary" size="small" style="margin-left: 10px;">
            + {{ $t('user.verification-code.required111566110577289') }}
          </a-button>
        </span>
      </div>
      <!-- 三行 -->
      <div style="margin: 10px;">
        <span>{{ $t('user.verification-code.required111566173') }}</span>
        <span>
          <a-input :placeholder="$t('user.verification-code.required11156617311')"
            style="width: 300px; margin-left: 27px;" size="small" />
        </span>
      </div>
      <!-- 四行 -->
      <div style="margin: 10px;">
        <span>{{ $t('user.verification-code.required1115661101') }}</span>
        <span>
          <a-select default-value=" Not Started" style="width: 200px;margin-left: 68px;" @change="handleChange"
            size="small">
            <a-select-option value="jack">
              Jack
            </a-select-option>
            <a-select-option value="lucy">
              Lucy
            </a-select-option>
            <a-select-option value="Yiminghe">
              yiminghe
            </a-select-option>
          </a-select>
        </span>
      </div>
      <!-- 五行 -->
      <div style="margin: 10px;">
        <span>Deadline</span>
        <span>
          <a-input placeholder="“Enter Date”" style="width: 200px; margin-left: 39px;" size="small" />
        </span>
      </div>
      <!-- 六行 -->
      <div style="margin: 10px;">
        <span>{{ $t('user.verification-code.required111566174') }}</span>
        <span>
          <a-select :default-value="$t('user.verification-code.required111566174')"
            style="width: 200px;margin-left: 15px;" @change="handleChange" size="small">
            <a-select-option value="jack">
              Jack
            </a-select-option>
            <a-select-option value="lucy">
              Lucy
            </a-select-option>
            <a-select-option value="Yiminghe">
              yiminghe
            </a-select-option>
          </a-select>
        </span>
      </div>
      <!-- 单选 -->
      <div style="margin: 10px;">
        <span>{{ $t('user.verification-code.required111566110577290') }}</span>
        <span style="margin-left: 20px;">
          <a-radio-group name="radioGroup" :default-value="1">
            <a-radio :value="1">
              否
            </a-radio>
            <a-radio :value="2">
              是
            </a-radio>
          </a-radio-group>
        </span>
      </div>
      <!-- DC) -->
      <div style="margin: 10px;">
        <span>DCO reviewer</span>
        <span>
          <a-select default-value=" 当前DPIA处理的DCO" style="width: 200px;margin-left: 15px;" @change="handleChange"
            size="small">
            <a-select-option value="jack">
              Jack
            </a-select-option>
            <a-select-option value="lucy">
              Lucy
            </a-select-option>
            <a-select-option value="Yiminghe">
              yiminghe
            </a-select-option>
          </a-select>
        </span>
      </div>
      <!-- 备注 -->
      <div style="margin: 10px; display: flex;">
        <span style="width: 50px;">{{ $t('user.verification-code.required111566181') }}</span>
        <span style="margin:8px 8px 0px 70px;">
          <a-timeline>
            <a-timeline-item>
              {{ $t('user.verification-code.required111566110577296') }}
              <a-textarea :placeholder="$t('user.verification-code.required111566110577290')"
                :auto-size="{ minRows: 2, maxRows: 6 }" />
            </a-timeline-item>
            <a-timeline-item>
              {{ $t('user.verification-code.required111566110577297') }}
              <a-textarea :placeholder="$t('user.verification-code.required111566110577291')"
                :auto-size="{ minRows: 2, maxRows: 6 }" allow-clear>
              </a-textarea>
            </a-timeline-item>
            <a-timeline-item>
              <a-textarea :placeholder="$t('user.verification-code.required111566110577293')"
                :auto-size="{ minRows: 2, maxRows: 6 }" />
            </a-timeline-item>
          </a-timeline>
          <a-button type="primary">
            +{{ $t('user.verification-code.required111566110577293') }}
          </a-button>
        </span>
      </div>
      <!-- 上传附件 -->
      <div style="margin: 10px 5px 10px 10px; display: flex;">
        <span>{{ $t('user.verification-code.required111566110577294') }}</span>
        <span style="margin-left:45px;">
          <a-upload name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            :headers="headers" @change="handleChanges">
            <a-button> <a-icon type="upload" /> {{ $t('user.verification-code.required111566163') }} </a-button>
          </a-upload>
        </span>
        <span style="font-size: 12px; margin-left: 5px;">
          {{ $t('user.verification-code.required111566110577295') }}：.rar .zip .doc. .docx .pdf .jpg…
        </span>
      </div> 
      <!-- 措施结果 -->
      <div style="margin: 10px; display: flex;">
        <span>{{ $t('user.verification-code.required111566180234') }}</span>
        <span>
          <a-textarea style="width: 350px; margin-left: 39px; " v-model="valuer"
            :placeholder="$t('user.verification-code.required11156618011667788')"
            :auto-size="{ minRows: 5, maxRows: 7 }" />
          <!-- <a-input placeholder="“Enter Date”" style="width: 200px; margin-left: 39px;" size="small" /> -->
        </span>
      </div>
    </a-modal>
  </div>
</template>
<script>

export default {
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    showmod() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    // 上传文件
    handleChanges(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  }
}
</script>
<style lang="less" scoped></style>